<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				background-color: rgb(40, 44, 53);
				perspective: 600px;
			}
			.cards-box{
				position: relative;
				display: inline-block;
				margin: 100px auto 0 200px;
			}
			.cards-box .cards{
				position: relative;
				display: inline-block;
				transition: 1s all;
				transform-origin: top;
			}
			.cards-in,.cards-back{
				display: inline-block;
				position: absolute;
				top: 0;
				left: 0;
				width: 330px;
				height: 460px;
				overflow: hidden;
				border-radius: 20px;
				background-size: cover;
			}
			.cards-in{
				backface-visibility: hidden;
				background: url('img/138_hires.png');
				background-size: cover;
			}
			.cards-back{
				background: url('img/tcg-card-back-2x.jpg');
				background-size: cover;
			}
			.cards-in img,.cards-back img{
				width: 100%;
				height: 100%;
			}
			.cards:hover{
				transform: rotateY(180deg);
			}
		</style>
	</head>
	<body>
		<div class="cards-box">
			<div class="cards">
				<div class="cards-back">
				</div>
				<div class="cards-in">
				</div>
			</div>
		</div>
	</body>
</html>